<!-- 从业者-我的-考试记录 -->
<template>
	<view class="recruitment-container">
		<!-- 顶部标签栏 -->
		<u-tabs :list="tabs" :current="currentTab" @change="tabChange" active-color="#2979ff" inactive-color="#666"
			bar-width="120" :bold="true" :font-size="32"></u-tabs>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 招聘列表 -->
			<view v-if="jobList.length > 0">
				<view v-for="(job, index) in jobList" :key="index" class="job-card" @click="recordDetails">
					<view class="card-top">
						<!--左边证书图片 -->
						<view class="card-left">
							<view class="job-image">
								<!-- <u-image width="168rpx" height="224rpx" :src="job.kzinfo.bkz_logo_uri[0].url ? job.kzinfo.bkz_logo_uri[0].url : ''"></u-image> -->
							 <u-image width="168rpx" height="224rpx" :src="job.kzinfo && job.kzinfo.bkz_logo_uri && job.kzinfo.bkz_logo_uri[0] && job.kzinfo.bkz_logo_uri[0].url ? job.kzinfo.bkz_logo_uri[0].url : ''"></u-image>
							</view>
						</view>
						<!-- 右边文字 -->
						<view class="card-right">
							<view class="job-info">
								<text class="job-name">{{ job.kzinfo.bkz_name }}</text>
							</view>
							<view class="job-info">
								<text class="job-item">报考等级：{{ job.kzl_levelname }}</text>
							</view>
							<view class="job-info">
								<text class="job-item">截止时间：{{ job.kzinfo.bkz_bmenddate }}</text>
							</view>
							<view class="job-meta">
								<!-- <text class="job-salary">状态：{{ job.statusText }}</text> -->
							</view>
						</view>
					</view>
					<view class="job-actions">
						<template v-if="job.status === 'SigningUp'">
							<u-button type="default" size="medium" shape="circle" plain :custom-style="customStyle" @click="editJob(job.bkz_code)">
								完善资料
							</u-button>
							<u-button type="default" size="medium" :custom-style="btuStyleBut" shape="circle" plain @click="recordDetails(job.kzl_code)">
								详情
							</u-button>
						</template>
						<template v-else-if="job.status === 'review'">
							<u-button type="default" size="medium" :custom-style="btuStyleBut" shape="circle" plain @click="recordDetails(job.bkz_code)">
								详情
							</u-button>
						</template>
						<template v-else>
							<!-- 状态无时临时增加 -->
							<u-button type="default" size="medium" shape="circle"  :custom-style="customStyle" @click="editJob(job.bkz_code)">
								完善资料
							</u-button>
							<!-- 状态无时临时增加结束 -->
							<u-button type="default" size="medium " :custom-style="btuStyleBut" shape="circle" plain @click="recordDetails(job.bkz_code,job.kzl_code)">
								详情
							</u-button>
						</template>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="您还未发布招聘信息"
				margin-top="100"></u-empty>
		</view>

		<!-- 发布按钮 -->
		<!-- 		<view class="publish-btn">
			<u-button type="primary" shape="circle" @click="createJob">
				发布新岗位
			</u-button>
		</view> -->

	</view>
</template>

<script>
	import DialNav from '@/components/nav/dial-nav.vue';
	export default {
		components: {
			DialNav
		},
		data() {
			return {
				btuStyleBut: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff"
				},
				// 按钮组中的样式写法
				customStyle: {
					marginRight: '20rpx',
					"color": "#ffffff",
					"backgroundColor": "#FA4646",
					
					// margin-right: 20rpx;
				
				},
				currentTab: 1, // 默认选中"我的招聘"
				// tabs页
				currentTab: 0,
				tabs: [{
						name: '全部'
					},
					{
						name: '报名中'
					},
					{
						name: '审核中'
					},
					{
						name: '待考中'
					},
					{
						name: '已考试'
					}
				],
				// 报名中：SigningUp， 待支付：unpaid， 已支付：paid ，报名成功:  registSuccess
				jobList: [{
						id: 1,
						title: '考试名称',
						level: '四级',
						image: '/static/nav/nav-classify.png',
						endTime: '2025-05-23',
						status: 'SigningUp',
						statusText: '报名中'
					},
					{
						id: 2,
						title: '考试名称',
						level: '四级',
						image: '/static/nav/nav-classify.png',
						endTime: '2025-05-23',
						status: 'review',
						statusText: '审核中'
					},
					{
						id: 2,
						title: '考试名称',
						level: '四级',
						image: '/static/nav/nav-classify.png',
						endTime: '2025-05-23',
						status: 'review',
						statusText: '已出成绩'
					}
				],

			}
		},
		computed: {
			// 按条件过滤是否发布的条件
			filteredJobs() {
				if (this.currentTab === 1) {
					return this.jobList.filter(job => job.status === 'SigningUp');
				} else if (this.currentTab === 2) {
					return this.jobList.filter(job => job.status === 'unpaid');
				}
				return this.jobList;
			}
		},
		onShow() {
			this.getcykzbm()
		},
		methods: {
			// 获取从业者考证列表
			getcykzbm() {
				this.$u.api.querykzbm({
					"usercode": uni.getStorageSync('usercode'),  ///#从业者用户code
				}).then(res => {
					console.log('cykzbm：', res)
					this.jobList = []
					this.jobList = res.data.base_info
				})
			},
			tabChange(index) {
				this.currentTab = index;
			},
			createJob() {
				uni.navigateTo({
					url: '/pages/recruitment/create'
				});
			},
			// 带参数的页面跳转
			editJob(id) {
				uni.navigateTo({
					url: `/pages/Practitioner/perfectData/perfectData?id=${id}`
				});
			},
			// 跳转到报名详情页面
			recordDetails(id,kzlcode) {
				// console.log('查看详情',id)
				uni.navigateTo({
					url: `/pages/Practitioner/examination/examinationDetails?bkzcode=${id}&kzlcode=${kzlcode}`
				});
			},
			deleteJob(id) {
				uni.showModal({
					title: '提示',
					content: '确定删除该招聘信息吗？',
					success: (res) => {
						if (res.confirm) {
							this.jobList = this.jobList.filter(job => job.id !== id);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			publishJob(id) {
				const job = this.jobList.find(job => job.id === id);
				if (job) {
					job.status = 'published';
					job.statusText = '已发布';
					uni.showToast({
						title: '发布成功',
						icon: 'success'
					});
				}
			},
			unpublishJob(id) {
				const job = this.jobList.find(job => job.id === id);
				if (job) {
					job.status = 'draft';
					job.statusText = '未发布';
					uni.showToast({
						title: '已下架',
						icon: 'success'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recruitment-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;

		/deep/ .u-tabs {
			background-color: #fff;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
			margin: 0 10px;
			border-radius: 12rpx;
		}

		.content {
			// flex: 1;
			overflow-y: auto;
			margin: 10px;
			// padding: 10rpx;

			.job-card {
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;

				.job-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.job-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}

					.job-salary {
						font-size: 28rpx;
						color: #ff6a00;
						font-weight: bold;
					}
				}

				.card-top {
					display: flex;
					// border-bottom: 1px solid #dfdfdf;
					// margin-bottom: 20px;
				}

				.card-left {
					width: 168rpx;
					height: 224rpx;
					margin-right: 20px;
				}
				
				.card-right {
					width: 250px;
				}


				.job-info {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					font-size: 26rpx;
					color: #666;
					font-family: Source Han Sans CN, Source Han Sans CN;
					
					.job-name {
						width: 100%;
						height: 40rpx;						
						font-weight: 500;
						font-size: 30rpx;
						color: #303133;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.info-item {
						width: 350rpx;
						height: 80rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #606266;
						text-align: left;
						font-style: normal;
						text-transform: none;

						&:last-child {
							margin-right: 0;
						}
					}
				}

				.job-meta {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #999;
					margin-bottom: 30rpx;
					// border-bottom: 1px solid #dfdfdf;
					padding-bottom: 15rpx;

					.status {
						font-weight: bold;

						&.status-published {
							color: #19be6b;
						}

						&.status-draft {
							color: #ff9900;
						}
					}
				}

				.job-actions {
					// display: flex;
					// justify-content: flex-end;
					text-align: right;
				}
			}
		}

		.publish-btn {
			padding: 20rpx;
			background-color: #fff;
			border-top: 1rpx solid #eee;
		}
	}
</style>